<!DOCTYPE html>
<!-- saved from url=(0067)https://websocket.kleshuo.com/Views/KP/#/main/main_ordinary_invoice -->
<html>
	{include file="public/head"}
	<body class="" style="">
		<style type="text/css" media="all">
			.threebox .smbox {
				color: #fff;
				background: #fff;
				padding: 5px 10px;
				border-radius: 3px;
				margin: 0 7px;
			}
			.bglist{
			    position: absolute;
			    width: 100%;
			    left: 0;
			    top: 0;
			    z-index: 1;
			}
			.bgli{
			    background: #fff;
			    height: 4vh;
			    width: 100%;
			}
			.bgli:nth-child(even){
			    background: #f0f0f0;
			}

			input {
				outline: none;
			}

			.ord-con-new {
				background: #ffff;
			}

			.navlist {
				display: flex;
				margin-top: 50px;
				border-bottom: 1px solid #ccc;
				padding: 0 20px;
				position: relative;
				z-index: 2;
			}

			.navlist .nav {
				padding: 0 15px;
				height: 30px;
				line-height: 30px;
				color: #999;
				margin-bottom: -1px;

			}

			.nav.active {
				border: 1px solid #ccc;
				border-bottom: 3px solid #f1f1f1;
				color: #165692;
			}

			.msgbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 20vh;
				position: relative;
				z-index: 2;
			}

			.msgli {
				display: flex;
				margin-bottom: 18px;
				
			}

			.msgli .left {
				margin-right: 10px;
				width: 180px;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.msgli input {
				border: 1px solid #ccc;
			}

			.msgli .left span {
				color: red;
				margin-right: 5px;
			}

			.msgli .right {
				width: 280px;
				display: flex;
			}
			.msgli .right .bank {
				border: 1px solid #ccc;
				padding: 5px;
				width: 100%;
				display: flex;
				align-content: center;

			}

			.msgli .right .bank input {
				width: 40%;
				margin-right: 10px;

			}

			.msgli .right .bank .add {
				width: 24px;
				height: 24px;
				border: 1px solid #ccc;
				text-align: center;
				background: #fff;
				line-height: 24px;
			}
            .msgli select{
                width: 260px;
                padding: 5px;
                box-sizing: border-box;
                margin-left: -70px;
            }
			.msg_btn {
				width: 20%;
				margin-left: 2%;
				background: #165692;
				color: #fff;
				line-height: 24px;
				text-align: center;
			}

			.outbox {
				display: none;
			}

			.outbg {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 600px;
				z-index: 1000;
				background: #fff;
				box-shadow: 0 0 10px #ccc;
			}

			.out-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				box-sizing: border-box;
				background: #1D5B96;
				color: #fff;
				font-size: 17px;
			}

			.out-title img {
				width: 20px;
			}

			.out-body {
				display: flex;
				justify-content: center;
				padding: 20px 5%;
				flex-direction: column;
				background: #F3F3F3;
			}
            .inline-title{
                font-size: 16px;
                margin-bottom: 8px;
            }
            .inline-info{
                padding-left: 6%;
                font-size: 14px;
            }
            .inline-info .inline-li{
                margin-bottom: 8px;
                display: flex;
            }
            .inline-li p{
                flex: 1;
            }

			.out-btn {
				display: flex;
				justify-content: center;
				padding: 10px;
				border-top: 1px solid #ccc;
				background: #F3F3F3;
			}

			.out-btn button {
				background: #1d5b96;
				color: #fff;
				margin: 0 10px;
				outline: 0;
				border: 0;
				padding: 7px 20px;
			}
		</style>
		<div id="app">
		    <div class="bglist">
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		        <div class="bgli"></div>
		    </div>
			<div class="ord-con-new">
				<div class="ord-div1-top"><img
						src="">
					<span>税务UKey状态信息</span>
					<div class="ord-div2-right"><a href="javascript:history.go(-1);"><i
								class="iconfont icon-back"></i></a>
					</div>
				</div>
				<div class="navlist">
					<div class="nav active" data-index="1">
						监控管理信息
					</div>
					<div class="nav" data-index="2">
						税务KEY信息
					</div>
				</div>
				<div class="msgbox">
				    <div class="msgli">
				        <select name="" id="">
				            <option>增值税专用发票</option>
				            <option>增值税普通发票</option>
				        </select>
				    </div>
					<div class="msgli">
						<div class="left">
						开票截止日期:
						</div>
						<div class="right">
							2024-02-23
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						数据报送起始日期:
						</div>
						<div class="right">
							2024-01-01
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						数据报送终止日期:
						</div>
						<div class="right">
							2024-01-31
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						单张发票开票金额限额(元): 
						</div>
						<div class="right">
							99999.99
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						最新报税日期: 
						</div>
						<div class="right">
							2023-12-31
						</div>
					</div>
					<div class="msgli">
						<div class="left">
					    上传截止日期:
						</div>
						<div class="right">
							1天
						</div>
					</div>
					<div class="msgli">
    					<div class="left">
    				    离线开票时长:
    					</div>
    					<div class="right">
    						120小时
    					</div>
    				</div>
    				<div class="msgli">
    					<div class="left">
    				    离线累计金额(元): 
    					</div>
    					<div class="right">
    						2500000.00
    					</div>
    				</div>
				
				</div>
				<div class="msgbox" style="display:none">
					<div class="msgli">
						<div class="left">
						税务UKey号:
						</div>
						<div class="right">
							917105087784
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						纳税人识别号: 
						</div>
						<div class="right">
						    91440300305875529Q
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						纳税人名称:
						</div>
						<div class="right">
							华屹(深圳)网络科技服务有限公司
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						税务机关代码:
						</div>
						<div class="right">
							14403073700
						</div>
					</div>
					<div class="msgli">
						<div class="left">
						税务机关名称:
						</div>
						<div class="right">
						    国家税务总局深圳市龙岗区税务局坂田税务所
						</div>
					</div>
					<div class="msgli">
						<div class="left">
					    开票机号:
						</div>
						<div class="right">
							0
						</div>
					</div>
					<div class="msgli">
    					<div class="left">
    				    税务UKey版本号: 
    					</div>
    					<div class="right">
    					00020002220628
    					</div>
    				</div>
    				<div class="msgli">
    					<div class="left">
    				    税务UKey时钟: 
    					</div>
    					<div class="right">
    						2024-01-10
    					</div>
    				</div>
    				<div class="msgli">
    					<div class="left">
    				    企业性质:
    					</div>
    					<div class="right">
    						一般纳税人
    					</div>
    				</div>
    				<div class="msgli">
    					<div class="left">
    				    BSP版本号:
    					</div>
    					<div class="right">
    						91010113220406
    					</div>
    				</div>
				
				</div>
			</div>
			
		</div>
		{include file="public/foot"}
		<script type="text/javascript" charset="utf-8" src='__STATIC__/User/js/jquery.min.js'>

		</script>

		<script type="text/javascript" charset="utf-8">
		    $('.nav').click(function(){
		        $('.nav').removeClass('active')
		        let i = $(this).data('index')
		        $(this).addClass('active')
		        $('.msgbox').hide()
		        $('.msgbox').eq(i-1).show()
		    })
			$('.el-select').click(function() {
				$('.el-select-dropdown').hide()
				$(this).find('.el-select-dropdown').toggle()
			})
			$('.outcancle').click(function() {
				$('.outbox').hide()
			})
			$('#infosure').click(function() {
				$('.outbox').hide()
			})
			$("#msg_btn").click(function() {
				$('.outbox').show()
			})
		</script>
		<script type="text/javascript">
			// var DEVSERVER = '';
			// var LANGUAGE = 'zh';
			$("#btn").click(function(e) {
				e.preventDefault()
				// $("#login").hide()
				// $("#submittingButton").show()
				$.ajax({
					type: "post",
					dataType: "json",
					data: $("form").serialize(),
					url: "{:url('invoice/kpindex')}",
					success: function(data) {
						if (data.status == 1) {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								window.location.href = data.url
							})
						} else {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								$("#login").show()
								// $("#submittingButton").hide()
							})
						}
					}
				})
			})
			$("#btn_copy").click(function(e) {
				e.preventDefault()
				// $("#login").hide()
				// $("#submittingButton").show()
				$.ajax({
					type: "post",
					dataType: "json",
					data: $("form").serialize(),
					url: "{:url('invoice/kpindex')}",
					success: function(data) {
						if (data.status == 1) {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								// window.location.href = data.url
							})
						} else {
							layer.msg(data.message, {
								time: 1500
							}, function() {
								$("#login").show()
								// $("#submittingButton").hide()
							})
						}
					}
				})
			})
			$(function() {
				$("#content_num").blur(function() {
					var num = isNaN($("#content_num").val()) ? 0 : parseInt($("#content_num").val());
					var price = Number($("#content_price").val());
					var content_rate = $("#content_rate").val();

					// console.log(num);

					var money = parseFloat(num) * parseFloat(price);

					$("#content_money").attr('value', money);
					var rate = parseFloat(content_rate) * parseFloat(money);

					var all = parseFloat(money) + parseFloat(rate);
					$("#content_tax").attr('value', rate);
					$("#hj_money").text(money);
					$("#hj_tax").text(parseInt(rate));
					$("#hj_all").text(parseInt(all));
				});

				$("#content_price").blur(function() {
					var num = isNaN($("#content_num").val()) ? 0 : parseInt($("#content_num").val());

					var price = Number($("#content_price").val());
					var content_rate = $("#content_rate").val();
					// console.log(price);

					var money = parseFloat(num) * parseFloat(price);
					$("#content_money").attr('value', money);
					var rate = parseFloat(content_rate) * parseFloat(money);

					var all = parseFloat(money) + parseFloat(rate);
					$("#content_tax").attr('value', rate);
					$("#hj_money").text(money);
					$("#hj_tax").text(parseInt(rate));
					$("#hj_all").text(parseInt(all));
				});
			});
		</script>
	</body>
</html>